<template>
  <div>
    <div id="centreLeft2Chart" style="width:260px; height: 350px;" />
  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  data() {
    return {}
  },
  mounted() {
    this.getWtyj_chaobzJgsFx()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    async getWtyj_chaobzJgsFx() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getWtyj_chaobzJgsFx({
          // 请求参数
          dep_code: '450000'
        })
        if (res.length == 0) {
          // 初始化data中的数值
          Object.assign(this.$data, this.$options.data())
        } else {
          // 取值赋给dep,bz,sy
          res.map(item => {
            // this.option.series[0].data = item.NUM.split(',')
            // this.option.series[0].data = item.NUM.split(',').map(Number)
          })
        }
        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.drawPie()
      }
    },
    drawPie(sidebar) {
      // 基于准备好的dom，初始化echarts实例
      const myChartPieLeft = echarts.init(
        document.getElementById('centreLeft2Chart')
      )
      //  ----------------------------------------------------------------

      myChartPieLeft.setOption({
        color: [
          '#37a2da',
          '#32c5e9',
          '#9fe6b8',
          '#ffdb5c',
          '#ff9f7f',
          '#fb7293',
          '#e7bcf3',
          '#8378ea'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        calculable: true,
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          bottom: 0,
          x: 'center',
          data: ['行政', '政法', '事业', '后勤事业', '后勤聘用'],
          textStyle: {
            color: '#fff'
          },
          itemGap: 20
        },
        series: [
          {
            name: '超编机构数分析图',
            type: 'pie',
            radius: [10, 60],
            roseType: 'area',
            center: ['50%', '40%'],
            label: {
              color: '#fff',
              overflow: 'break'
            },
            data: [
              { value: 100, name: '行政' },
              { value: 80, name: '政法' },
              { value: 60, name: '事业' },
              { value: 40, name: '后勤事业' },
              { value: 20, name: '后勤聘用' }
            ]
          }
        ]
      })
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChartPieLeft.resize(), false)
      // 侧边栏变化
      if (sidebar) {
        myChartPieLeft.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
